﻿@inherits RadzenComponentWithChildren
@if (Visible)
{
    <div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
        <div class="rz-panel-titlebar">
            @if (!string.IsNullOrEmpty(Text) || !string.IsNullOrEmpty(Icon))
            {
                <div>
                    @if (!string.IsNullOrEmpty(Icon))
                    {
                        <i class="rzi" style="@(!string.IsNullOrEmpty(IconColor) ? $"color:{IconColor}" : null)">@((MarkupString)Icon)</i>
                    }
                    @if (!string.IsNullOrEmpty(Text))
                    {
                        <span>@Text</span>
                    }
                </div>
            }
            @HeaderTemplate
            @if (AllowCollapse)
            {
                @if (collapsed)
                {
                    <a @onclick=@Toggle class="rz-panel-titlebar-icon rz-panel-titlebar-toggler"
                       href="javascript:void(0)" role="tab" id="rz-panel-0-label" aria-controls="rz-panel-0-content"
                       aria-expanded="false" aria-label="@ExpandAriaLabel" title="@ExpandTitle">
                        <span class="rzi rzi-plus"></span>
                    </a>
                }
                else
                {
                    <a @onclick=@Toggle class="rz-panel-titlebar-icon rz-panel-titlebar-toggler"
                       href="javascript:void(0)" role="tab" id="rz-panel-0-label" aria-controls="rz-panel-0-content"
                       aria-expanded="true" aria-label="@CollapseAriaLabel" title="@CollapseTitle">
                        <span class="rzi rzi-minus"></span>
                    </a>
                }
            }
        </div>
        <div class="rz-panel-content-wrapper" role="region" aria-hidden="false" style="@contentStyle">
            <div class="rz-panel-content">
                @ChildContent
            </div>
            @if (FooterTemplate != null)
            {
                <div class="rz-panel-footer">
                    @FooterTemplate
                </div>
            }
        </div>
        @if (SummaryTemplate != null)
        {
            <div class="rz-panel-content-wrapper" role="region" aria-hidden="false" style="@summaryContentStyle">
                <div class="rz-panel-content rz-panel-content-summary">
                    @SummaryTemplate
                </div>
            </div>
        }
    </div>
}